<template>
  <view>
    <umask :show="show" @click="" :duration="0">
      <view class="page-height">
        <view class="page-content">
          <view class="wrap">
            <view class="popup-bg">
              <view class="popup-content popup-content-show">
                <view class="update-wrap">
                  <image src="./img/img.png" class="top-img">
                  </image>
                  <view class="content">
                    <text class="title">发现新版本V{{ newVision }}</text>
                    <!-- 升级描述 -->
                    <view class="title-sub" v-html="log"></view>
                    <!-- 升级按钮 -->
                    <button class="btn" v-if="!pressShow" @click.stop="toUpLoad()">立即升级</button>
                    <!-- 下载进度 -->
                    <view class="sche-wrap" v-else>
                      <!-- 更新包下载中 -->
                      <view class="sche-bg">
                        <view class="sche-bg-jindu" :style="{ 'width': pressValue + '%' }"></view>
                      </view>
                      <text class="down-text">下载进度:{{ (downSize / 1024 / 1024
                      ).toFixed(2) }}M/{{ (fileSize / 1024 / 1024).toFixed(2) }}M</text>
                    </view>
                  </view>
                </view>
                <image v-show="is_enforce == 0" src="./img/close.png" class="close-ioc" @click.stop="closeUpdate()">
                </image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </umask>
  </view>
</template>

<script>
import { downloadApk } from './appUpdater.js';
import manifest from '@/manifest.json'
import umask from "./u-mask/u-mask.vue"
export default {
  name: "am-upVersion",
  components: {
    umask
  },
  data () {
    return {
      pressShow: false, //进度条显示
      downSize: null, //下载文件大小
      pressValue: null, //下载百分比
      fileSize: null, //文件总大小
      uploadPopShow: false,
    };
  },

  props: {
    upLoadUrl: {
      type: String,
      default: "",
    },
    is_enforce: {
      type: Number,
      default: 0
    },
    newVision: {
      type: String,
      default: "1.0.0",
    },
    appStoreUrl: {
      type: String,
      default: "",
    },
    show: {
      type: Boolean,
      default: false
    },
    log: {
      type: String,
      default: "优化",
    }
  },

  // watch: {
  // 	newVision(newValue, oldValue) {
  // 		console.info(newValue,manifest.versionName)
  // 		// if (newValue > manifest.versionName) {
  // 			this.uploadPopShow = true
  // 		//
  // 	}
  // },
  //      updated() {
  // console.info("zhix",this.show)
  //      	this.uploadPopShow = this.show;
  //      },
  mounted () {
    // console.info("执行了")
  },
  updated () {
    // console.info("触发了更新",this.newVision)
  },
  methods: {
    /**
     * 下载升级
     */
    toUpLoad () {
      let that = this
      if (!that.upLoadUrl) {
        uni.showToast({
          title: "未检测到下载地址",
          icon: "none"
        })
        return
      }

      downloadApk(that.upLoadUrl, that.appStoreUrl, `绿港云${this.newVision}.apk`).then(res => {
        console.log('成功了');

        that.$emit("close"); // 关闭弹窗
      }).catch(err => {
        if (uni.getSystemInfoSync().platform === 'ios') {
          plus.runtime.launchApplication({
            action: that.appStoreUrl
          }, function (e) {
            console.log('Open system default browser failed: ' + e.message);
          });
          return
        }

        that.pressShow = true
        const task = plus.downloader.createDownload(that.upLoadUrl, {},
          (download, status) => {
            if (status === 200) {
              console.log('==success==', download)
              that.pressShow = false
              that.uploadPopShow = false
              that.$emit("close")
              // #ifdef APP-PLUS
              plus.runtime.install(download.filename)
              // #endif
            } else {
              console.log('==error==', download)
              uni.showToast({
                title: "安装包下载失败!请联系管理员。",
                icon: "none"
              })
            }
          }
        );

        // 监听下载进度
        const onStateChanged = (download, status) => {
          const progress = (download.downloadedSize / download.totalSize * 100).toFixed(2);
          that.downSize = download.downloadedSize
          that.fileSize = download.totalSize
          that.pressValue = progress
        }
        task.addEventListener("statechanged", onStateChanged, false);

        task.start();
      })
    },
    /**
     * 关闭升级
     */
    closeUpdate () {
      this.pressShow = false
      this.uploadPopShow = false
      console.info(this.$parent)
      this.$emit("close")
      // this.$parent.$parent.close();
      // this.$root.newVision = ""
      if (this.downloadTask) {
        this.downloadTask.abort()
      }
    }
  },

}
</script>

<style lang="scss">
.page-height {
  // height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba($color: #000000, $alpha: .7);
}

.popup-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 750rpx;
}

.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-content-show {
  animation: mymove 300ms;
  transform: scale(1);
}

@keyframes mymove {
  0% {
    transform: scale(0);
    /*开始为原始大小*/
  }

  100% {
    transform: scale(1);
  }

}

.update-wrap {
  width: 480rpx;
  border-radius: 18rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  padding: 170rpx 30rpx 0;

  .top-img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 256rpx;
    top: -128rpx;
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 40rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #6526f3;
    }

    .title-sub {
      text-align: left;
      font-size: 24rpx;
      color: #666666;
      padding: 30rpx 0;
      white-space: pre-wrap
    }

    .btn {
      width: 460rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 30rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 100px;
      background-color: #6526f3;
      margin-top: 20rpx;
    }
  }
}

.close-ioc {
  width: 70rpx;
  height: 70rpx;
  margin-top: 30rpx;
}

.sche-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 10rpx 50rpx 0;

  .sche-wrap-text {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 20rpx;
  }

  .sche-bg {
    position: relative;
    background-color: #cccccc;
    height: 30rpx;
    border-radius: 100px;
    width: 480rpx;
    display: flex;
    align-items: center;

    .sche-bg-jindu {
      position: absolute;
      left: 0;
      top: 0;
      height: 30rpx;
      min-width: 40rpx;
      border-radius: 100px;
      background: url(./img/round.png) #5775e7 center right 4rpx no-repeat;
      background-size: 26rpx 26rpx;
    }
  }

  .down-text {
    font-size: 24rpx;
    color: #5674e5;
    margin-top: 16rpx;
  }
}
</style>
